<template>
  <div class="bg-style">
    <i-pageBody class="add_i-color">
      <div slot="page-main">
        <div class="container container-space container-space--vertical">
          <div class="container-space__child">
            <Form ref="form" :model="formdata" :label-width="100">
              <Row :gutter="20">
                <i-col :span="5">
                  <FormItem prop="custId" label="客户名称：">
                    <Select
                      v-model="formdata.custId"
                      placeholder="请选择客户名称"
                      style="100%"
                      @on-change="handleCust"
                      clearable
                    >
                      <Option
                        :value="value"
                        v-for="({ label, value }, index) in options.custs"
                        :key="index"
                        >{{ label }}</Option
                      >
                    </Select>
                  </FormItem>
                </i-col>
                <i-col :span="5">
                  <FormItem prop="measPointId" label="测量点名称：">
                    <Select
                      v-model="formdata.measPointId"
                      placeholder="请选择所测量点名称"
                      style="100%"
                      clearable
                    >
                      <Option
                        :value="value"
                        v-for="({ label, value }, index) in options.measpoints"
                        :key="index"
                        >{{ label }}</Option
                      >
                    </Select>
                  </FormItem>
                </i-col>
                <i-col :span="5">
                  <FormItem prop="warningType" label="告警类型：">
                    <Select
                      v-model="formdata.warningType"
                      placeholder="请选择告警类型"
                      style="100%"
                      clearable
                    >
                      <Option
                        :value="value"
                        v-for="({ label, value }, index) in options.bCodes"
                        :key="index"
                        >{{ label }}</Option
                      >
                    </Select>
                  </FormItem>
                </i-col>
                <i-col :span="4">
                  <Button
                    type="primary"
                    :loading="loading.search"
                    @click="handleSearch"
                  >
                    查询
                  </Button>
                  <Button
                    type="default"
                    :loading="loading.reset"
                    @click="handleReset"
                  >
                    重置
                  </Button>
                </i-col>
              </Row>
            </Form>
          </div>
          <div class="container-space__child">
            <Button type="primary" @click="handleCreate">
              新增
            </Button>
          </div>
          <div class="container-space__child">
            <Table
              :columns="columns"
              :data="data"
              border
              stripe
              :loading="tableLoading"
            ></Table>
          </div>
          <div class="container-space__child" v-show="data.length > 0">
            <div class="container-page">
              <PageHeader
                :total="formdata.total"
                :page-size="formdata.pageSize"
                :page="formdata.page"
              ></PageHeader>
              <Page
                :total="formdata.total"
                :page-size="formdata.pageSize"
                @on-change="handlePage"
              />
            </div>
          </div>
        </div>
      </div>
    </i-pageBody>
    <Modal v-model="edit.modal" :width="1200" :title="editTitle">
      <div>
        <Form
          ref="editForm"
          :model="edit.formdata"
          :rules="edit.rules"
          :label-width="140"
        >
          <Row>
            <i-col :span="12">
              <FormItem prop="custId" label="客户名称：">
                <Select
                  v-model="edit.formdata.custId"
                  placeholder="请选择客户名称"
                  style="100%"
                  @on-change="handleEditCust"
                  clearable
                >
                  <Option
                    :value="value"
                    v-for="({ label, value }, index) in options.edit.custs"
                    :key="index"
                    >{{ label }}</Option
                  >
                </Select>
              </FormItem>
            </i-col>
            <i-col :span="12">
              <FormItem prop="siteId" label="客户站点：">
                <Select
                  v-model="edit.formdata.siteId"
                  placeholder="请选择客户站点"
                  style="100%"
                  clearable
                >
                  <Option
                    :value="value"
                    v-for="({ label, value }, index) in options.edit.csites"
                    :key="index"
                    >{{ label }}</Option
                  >
                </Select>
              </FormItem>
            </i-col>
            <i-col :span="12">
              <FormItem prop="measPointId" label="测量点名称：">
                <Select
                  v-model="edit.formdata.measPointId"
                  placeholder="请选择所测量点名称"
                  style="100%"
                  clearable
                >
                  <Option
                    :value="value"
                    v-for="({ label, value }, index) in options.edit.measpoints"
                    :key="index"
                    >{{ label }}</Option
                  >
                </Select>
              </FormItem>
            </i-col>
            <i-col :span="12">
              <FormItem prop="cpDataNo" label="测量数据项：">
                <Select
                  v-model="edit.formdata.cpDataNo"
                  placeholder="请选择测量数据项"
                  style="100%"
                  clearable
                >
                  <Option
                    :value="value"
                    v-for="({ label, value }, index) in options.edit.cpDatas"
                    :key="index"
                    >{{ label }}</Option
                  >
                </Select>
              </FormItem>
            </i-col>
            <i-col :span="12">
              <FormItem prop="warningType" label="告警类型：">
                <Select
                  v-model="edit.formdata.warningType"
                  placeholder="请选择告警类型"
                  style="100%"
                  @on-change="handleEditBCode"
                  clearable
                >
                  <Option
                    :value="value"
                    v-for="({ label, value }, index) in options.edit.bCodes"
                    :key="index"
                    >{{ label }}</Option
                  >
                </Select>
              </FormItem>
            </i-col>
            <i-col :span="12">
              <FormItem prop="warningId" label="告警项名称：">
                <Select
                  v-model="edit.formdata.warningId"
                  placeholder="请选择告警项名称"
                  style="100%"
                  clearable
                >
                  <Option
                    :value="value"
                    v-for="({ label, value }, index) in options.edit
                      .warningNames"
                    :key="index"
                    >{{ label }}</Option
                  >
                </Select>
              </FormItem>
            </i-col>
            <i-col :span="12">
              <FormItem prop="alarmCount" label="触发次数：">
                <Select
                  v-model="edit.formdata.alarmCount"
                  placeholder="请选择触发次数"
                  style="100%"
                  @on-change="handleEditAlarmCount"
                  clearable
                >
                  <Option
                    :value="value"
                    v-for="({ label, value }, index) in options.edit
                      .alarmCounts"
                    :key="index"
                    >{{ label }}</Option
                  >
                </Select>
              </FormItem>
            </i-col>
            <i-col :span="12">
              <FormItem prop="valueLowerLimit" label="告警最小值：">
                <InputNumber
                  style="width:100%"
                  :min="0"
                  v-model="edit.formdata.valueLowerLimit"
                  clearable
                ></InputNumber>
              </FormItem>
            </i-col>
            <i-col :span="12">
              <FormItem prop="valueUpperLimit" label="告警最大值：">
                <InputNumber
                  style="width:100%"
                  :min="0"
                  v-model="edit.formdata.valueUpperLimit"
                  clearable
                ></InputNumber>
              </FormItem>
            </i-col>
            <i-col :span="12">
              <FormItem prop="triggerPeriod" label="触发周期：">
                <Select
                  v-model="edit.formdata.triggerPeriod"
                  placeholder="请选择触发周期"
                  style="100%"
                  clearable
                >
                  <Option
                    :value="value"
                    v-for="({ label, value }, index) in options.edit.periods"
                    :key="index"
                    >{{ label }}</Option
                  >
                </Select>
              </FormItem>
            </i-col>
          </Row>
          <Row>
            <i-col :span="8">
              <FormItem prop="effectiveSign" label="状态：">
                <RadioGroup v-model="edit.formdata.effectiveSign">
                  <Radio :label="1">启用</Radio>
                  <Radio :label="0">停用</Radio>
                </RadioGroup>
              </FormItem>
            </i-col>
          </Row>
        </Form>
      </div>
      <div slot="footer">
        <Button type="default" @click="edit.modal = false">
          取消
        </Button>
        <Button type="primary" @click="handleSubmit" :loading="loading.save">
          保存
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import PageHeader from "../components/page-header";
import { TABLE_SETTING_COLUNMS, RULES_EDIT } from "./constants";
import {
  getSWarningCust,
  getSWarningMeaspoint,
  getSWarningBCode,
  getSWarningParam,
  getSWarningAlarmCount,
  getSWarningPeriod,
  getSWarningCpData,
  getSWarningCsite,
  getSWarningName,
  postSWarningParaSaveOrUpdate
} from "@/api/scada";
export default {
  name: "setting",
  props: {},
  data() {
    const columns = [
      ...TABLE_SETTING_COLUNMS,
      {
        title: "操作",
        width: 100,
        fixed: "right",
        align: "center",
        render: (h, params) => {
          const { row } = params;
          return h("span", [
            h(
              "Button",
              {
                props: {
                  type: "primary",
                  size: "small"
                },
                nativeOn: {
                  click: () => {
                    this.handleUpdate(row);
                  }
                }
              },
              "编辑"
            )
          ]);
        }
      }
    ];
    return {
      loading: {
        normal: false,
        search: false,
        reset: false,
        page: false,
        save: false
      },
      options: {
        custs: [],
        measpoints: [],
        bCodes: [],
        edit: {
          custs: [],
          measpoints: [],
          bCodes: [],
          alarmCounts: [],
          periods: [],
          cpDatas: [],
          csites: [],
          warningNames: []
        }
      },
      formdata: {
        custId: "",
        measPointId: "",
        warningType: "",
        page: 1,
        pageSize: 10,
        total: 0
      },
      columns,
      data: [],
      edit: {
        type: "create",
        modal: false,
        formdata: {
          warningParaId: "",
          custId: "",
          siteId: "",
          measPointId: "",
          cpDataNo: "",
          warningId: "",
          warningType: "",
          alarmCount: "",
          valueUpperLimit: null,
          valueLowerLimit: null,
          triggerPeriod: "",
          effectiveSign: 1
        },
        rules: RULES_EDIT
      }
    };
  },
  computed: {
    tableLoading() {
      const {
        loading: { normal, search, reset, page }
      } = this;
      return normal || search || reset || page;
    },
    editTitle() {
      const {
        edit: { type }
      } = this;
      const options = [
        { title: "新增告警参数设置", type: "create" },
        { title: "修改告警参数设置", type: "update" }
      ];
      const { title } = options.find((element) => element.type === type) || {};
      return title;
    }
  },
  created() {},
  mounted() {
    this.getSWarningCust();
    this.getSWarningBCode();
    this.getSWarningParam();
    this.getSWarningCpData();
    this.getSWarningAlarmCount();
  },
  watch: {
    "edit.modal"(val) {
      !val && this.$refs.editForm.resetFields();
    }
  },
  methods: {
    handleSearch() {
      this.formdata.page = 1;
      this.getSWarningParam("search");
    },
    handleReset() {
      this.formdata.page = 1;
      this.$refs.form.resetFields();
      this.getSWarningParam("reset");
    },
    handlePage(page) {
      this.formdata.page = page;
      this.getSWarningParam("page");
    },
    handleSubmit() {
      this.$refs.editForm.validate((valid) => {
        if (!valid) return;
        this.loading.save = true;
        const {
          type,
          formdata: {
            warningParaId,
            custId,
            siteId,
            measPointId,
            cpDataNo,
            warningId,
            warningType,
            alarmCount,
            valueUpperLimit,
            valueLowerLimit,
            triggerPeriod,
            effectiveSign
          }
        } = this.edit;
        const params = {
          custId,
          siteId,
          measPointId,
          cpDataNo,
          warningId,
          warningType,
          alarmCount,
          valueUpperLimit,
          valueLowerLimit,
          triggerPeriod,
          effectiveSign
        };
        if (type === "update") {
          params.warningParaId = warningParaId;
        }
        postSWarningParaSaveOrUpdate(params)
          .then((ret) => {
            const { code } = ret || {};
            if (code === 200) {
              this.edit.modal = false;
              this.getSWarningParam();
            }
          })
          .finally(() => {
            this.loading.save = false;
          });
      });
    },
    handleUpdate(row) {
      this.edit.modal = true;
      this.edit.type = "update";
      const { custId, warningType, alarmCount } = row;
      Object.assign(this.edit.formdata, row, {
        alarmCount: String(alarmCount)
      });
      this.getSWarningMeaspoint("edit");
      this.getSWarningCsite();
      this.getSWarningName();
      this.getSWarningPeriod();
    },
    handleCreate() {
      this.edit.modal = true;
      this.edit.type = "create";
    },
    handleCust() {
      this.formdata.measPointId = "";
      this.options.measpoints = [];
      if (this.formdata.custId) {
        this.getSWarningMeaspoint("search");
      }
    },
    handleEditCust() {
      this.edit.formdata.measPointId = "";
      this.edit.formdata.siteId = "";
      this.options.edit.measpoints = [];
      this.options.edit.csites = [];
      if (this.edit.formdata.custId) {
        this.getSWarningMeaspoint("edit");
        this.getSWarningCsite();
      }
    },
    handleEditBCode(value) {
      this.edit.formdata.warningId = "";
      this.options.edit.warningNames = [];
      if (this.edit.formdata.warningType) {
        this.getSWarningName();
      }
    },
    handleEditAlarmCount() {
      this.edit.formdata.triggerPeriod = "";
      this.options.edit.periods = [];
      if (this.edit.formdata.alarmCount) {
        this.getSWarningPeriod();
      }
    },
    // 客户名称
    getSWarningCust() {
      this.options.custs = [];
      this.options.edit.custs = [];
      getSWarningCust().then((ret) => {
        const { code, result } = ret || {};
        if (code === 200) {
          const custs = (result || []).map((element) => {
            const { custId, custName } = element;
            return {
              value: custId,
              label: custName
            };
          });
          this.options.custs = custs;
          this.options.edit.custs = custs;
        }
      });
    },
    // 测量点名称
    getSWarningMeaspoint(type) {
      let custId = "";
      if (type === "edit") {
        custId = this.edit.formdata.custId;
        this.options.edit.measpoints = [];
      } else {
        custId = this.formdata.custId;
        this.options.measpoints = [];
      }
      getSWarningMeaspoint({ custId }).then((ret) => {
        const { code, result } = ret || {};
        if (code === 200) {
          const measpoints = (result || []).map((element) => {
            const { measName, measPointId } = element;
            return {
              value: measPointId,
              label: measName
            };
          });
          if (type === "edit") {
            this.options.edit.measpoints = measpoints;
          } else {
            this.options.measpoints = measpoints;
          }
        }
      });
    },
    // 客户站点
    getSWarningCsite() {
      this.options.edit.csites = [];
      getSWarningCsite({ custId: this.edit.formdata.custId }).then((ret) => {
        const { code, result } = ret || {};
        if (code === 200) {
          const csites = (result || []).map((element) => {
            const { siteName, siteNo } = element;
            return {
              value: siteNo,
              label: siteName
            };
          });
          this.options.edit.csites = csites;
        }
      });
    },
    // 告警类型
    getSWarningBCode() {
      this.options.bCodes = [];
      this.options.edit.bCodes = [];
      getSWarningBCode().then((ret) => {
        const { code, result } = ret || {};
        if (code === 200) {
          const bCodes = (result || []).map((element) => {
            const { codeName, codeValue } = element;
            return {
              value: codeValue,
              label: codeName
            };
          });
          this.options.edit.bCodes = bCodes;
          this.options.bCodes = bCodes;
        }
      });
    },
    // 告警项名称
    getSWarningName() {
      this.options.edit.warningNames = [];
      getSWarningName({ warningType: this.edit.formdata.warningType }).then(
        (ret) => {
          const { code, result } = ret || {};
          if (code === 200) {
            const warningNames = (result || []).map((element) => {
              const { warningId, warningName } = element;
              return {
                value: warningId,
                label: warningName
              };
            });
            this.options.edit.warningNames = warningNames;
          }
        }
      );
    },
    // 触发次数
    getSWarningAlarmCount() {
      this.options.edit.alarmCounts = [];
      getSWarningAlarmCount().then((ret) => {
        const { code, result } = ret || {};
        if (code === 200) {
          const alarmCounts = (result || []).map((element) => {
            const { alarmCountValue, alarmCount } = element;
            return {
              value: alarmCountValue,
              label: alarmCount
            };
          });
          this.options.edit.alarmCounts = alarmCounts;
        }
      });
    },
    // 测量数据项
    getSWarningCpData() {
      this.options.edit.cpDatas = [];
      getSWarningCpData().then((ret) => {
        const { code, result } = ret || {};
        if (code === 200) {
          const cpDatas = (result || []).map((element) => {
            const { cpDataNoName, cpDataNo } = element;
            return {
              value: cpDataNo,
              label: cpDataNoName
            };
          });
          this.options.edit.cpDatas = cpDatas;
        }
      });
    },
    // 触发周期
    getSWarningPeriod() {
      this.options.edit.periods = [];
      getSWarningPeriod({ alarmCount: this.edit.formdata.alarmCount }).then(
        (ret) => {
          const { code, result } = ret || {};
          if (code === 200) {
            const periods = (result || []).map((element) => {
              const { triggerPeriodName, triggerPeriod } = element;
              return {
                value: triggerPeriod,
                label: triggerPeriodName
              };
            });
            this.options.edit.periods = periods;
          }
        }
      );
    },
    // 列表
    getSWarningParam(loadingType = "normal") {
      this.loading[loadingType] = true;
      const {
        formdata: { custId, measPointId, warningType, page: pageNum, pageSize }
      } = this;
      const params = {
        custId,
        measPointId,
        warningType,
        pageNum,
        pageSize
      };
      getSWarningParam(params)
        .then((ret) => {
          const { code, result } = ret || {};
          if (code === 200) {
            const { totalNum, items } = result || {};
            this.formdata.total = totalNum || 0;
            this.data = items || [];
          }
        })
        .finally(() => {
          this.loading[loadingType] = false;
        });
    }
  },
  components: { PageHeader }
};
</script>
<style scoped lang="scss">
.bg-style {
  background: url(~@/assets/img/welcome.png) center no-repeat;
  background-size: contain;
  width: 100%;
  height: 100%;
}
.container {
  padding: 20px;
  height: 100%;
  overflow: auto;
}
.container-title {
  padding-left: 10px;
  font-size: 16px;
  color: #333;
  position: relative;
}
.container-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 4px;
  height: 16px;
  background-color: #0893fd;
  line-height: 16px;
}

.container-space > .container-space__child:not(:last-child) {
  margin-right: 20px;
}
.container-space.container-space--vertical
  > .container-space__child:not(:last-child) {
  margin-bottom: 20px;
  margin-right: 0;
}
.container-space--inner {
  padding: 20px;
}

.container-align--center {
  text-align: center;
}
.container-align--right {
  text-align: right;
}
.container-page {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<style lang="scss" scoped>
/deep/ .ivu-table-tip table tr td {
  text-align: center;
  background-image: url("~@/assets/img/zwsj.png");
  background-position: center 60px;
  background-repeat: no-repeat;
  color: #999;
  height: 369px;
  background-size: 190px;
  span {
    display: none;
  }
}
</style>
